<template>
  <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4">
    <!-- 标题和操作按钮 -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-medium text-gray-900">操作历史</h3>
      <div class="flex items-center space-x-2">
        <button
          @click="exportOperations"
          :disabled="operations.length === 0"
          :class="`p-1.5 rounded-md transition-colors ${
            operations.length > 0
              ? 'text-blue-600 hover:bg-blue-50'
              : 'text-gray-400 cursor-not-allowed'
          }`"
          title="导出操作记录"
        >
          <Download class="w-4 h-4" />
        </button>
        <button
          @click="onUndo"
          :disabled="operations.length === 0"
          :class="`p-1.5 rounded-md transition-colors ${
            operations.length > 0
              ? 'text-blue-600 hover:bg-blue-50'
              : 'text-gray-400 cursor-not-allowed'
          }`"
          title="撤销上一步"
        >
          <RotateCcw class="w-4 h-4" />
        </button>
      </div>
    </div>

    <!-- 操作历史列表 -->
    <div class="space-y-2 max-h-[300px] overflow-y-auto">
      <transition-group
        name="list"
        tag="div"
      >
        <div v-if="operations.length === 0" class="text-center text-gray-500 py-4">
          暂无操作记录
        </div>

        <div
          v-for="op in operations"
          :key="op.timestamp"
          class="flex items-start space-x-3 p-2 rounded-md hover:bg-gray-50"
        >
          <div class="flex-shrink-0 mt-1">
            <component :is="getOperationIcon(op.type)" class="w-3.5 h-3.5 text-gray-400" />
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm text-gray-900">
              {{ formatOperationDescription(op) }}
            </p>
            <p class="text-xs text-gray-500">
              {{ formatTime(op.timestamp) }}
            </p>
          </div>
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
            {{ op.mode }}
          </span>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script setup>
import { 
  Clock, 
  RotateCcw, 
  Move, 
  Plus, 
  Sliders, 
  Download 
} from 'lucide-vue-next';

const props = defineProps({
  operations: {
    type: Array,
    required: true,
    default: () => []
  },
  onUndo: {
    type: Function,
    required: true
  }
});

// 获取操作图标
const getOperationIcon = (type) => {
  switch (type) {
    case 'point_move':
      return Move;
    case 'object_create':
      return Plus;
    case 'value_change':
      return Sliders;
    default:
      return Clock;
  }
};

// 格式化操作描述
const formatOperationDescription = (operation) => {
  const { type, details } = operation;
  
  if (!details) return '执行操作';

  switch (type) {
    case 'point_move':
      if (details.coordinates) {
        const { x, y, z } = details.coordinates;
        return z !== undefined
          ? `移动点至 (${x.toFixed(2)}, ${y.toFixed(2)}, ${z.toFixed(2)})`
          : `移动点至 (${x.toFixed(2)}, ${y.toFixed(2)})`;
      }
      return '移动点';
      
    case 'object_create':
      return `创建${details.objectType || '对象'} ${details.command || ''}`;
      
    case 'value_change':
      return `修改${details.objectType || '对象'}值为 ${details.value}`;
      
    default:
      return '执行操作';
  }
};

// 格式化时间
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString();
};

// 导出操作记录
const exportOperations = () => {
  const data = {
    operations: props.operations,
    exportTime: new Date().toISOString(),
    metadata: {
      version: '1.0',
      format: 'GeoGebra Digital Twin'
    }
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = `geogebra-operations-${new Date().toISOString()}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};
</script>

<style scoped>
/* 列表动画 */
.list-enter-active,
.list-leave-active {
  transition: all 0.3s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}
</style>
